<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <style>
      .wrap {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        text-align: center;
        border: 1px solid #ccc;
        position: relative;
      }
      .wrap > p {
        display: flex;
        justify-content: space-between;
        margin: 20px 20px;
      }
      .wrap > p:nth-of-type(5) {
        justify-content: space-evenly;
      }
      .wrap input {
        outline: none;
      }
      #btn {
        position: absolute;
        width: 80px;
        height: 20px;
        top: 10px;
        right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <h2>注册</h2>
      <p>用户名：<input type="text" /></p>
      <p>密码：<input type="text" /></p>
      <p>确认密码：<input type="text" /></p>
      <p>昵称：<input type="text" /></p>
      <p>
        <button onclick="resetFn()">重置</button
        ><button onclick="registerFn()">注册</button>
      </p>
      <button id="btn" onclick="tologinFn()">已有账号</button>
    </div>
  </body>
  <script type="module">
    import http from "./request.js";
    window.resetFn = function () {
      document.querySelectorAll("p input").forEach((v) => {
        v.value = null;
      });
    };
    window.registerFn = function () {
      let ipt = document.querySelectorAll("p input");
      // let head = {
      //   username: ipt[0].value,
      //   password: ipt[1].value,
      //   rpassword: ipt[2].value,
      //   nickname: ipt[3].value,
      // };
      // console.log(head);
      http
        .request({
          url: "/users/register",
          method: "post",
          // "content-type": "application/x-www-form-urlencoded",
          data: {
            username: ipt[0].value,
            password: ipt[1].value,
            rpassword: ipt[2].value,
            nickname: ipt[3].value,
          },
        })
        .then((r) => {
          console.log(r.data);
          if (r.status >= 200 && r.status < 300) {
            alert("注册成功，点击跳转登录页...");
            location.href = "./login.html";
          }
        });
    };
    window.tologinFn = function () {
      location.href = "./login.html";
    };
  </script>
</html>
